<template>
	<view class="container">
		<view class="info-box primary-bg">
			<view open-type="getUserInfo" class="avatar">
				<open-data type='userAvatarUrl' class="userinfo" mode="cover"></open-data>
			</view>
			<view class="user-info">
				<view class="username text-white">微信用户</view>
				<view v-if="phone" class="tips-txt" open-type="getPhoneNumber" type="primary">{{phone}}</view>
				<view v-else class="auth-box">
					<view class="btn-group" style="margin-left: -24rpx;">
						<button class="tips-txt" style="background: #000000;text-align: left;margin-right: 20rpx" open-type="getPhoneNumber" type="primary" @getphonenumber="getPhoneNumber">授权手机号</button>
					</view>
				</view>
				<view>
					<button style="margin-top: -75rpx;margin-left: 400rpx;" class="button" @click="dcEx()">导出</button>
				</view>
			</view>
		</view>
		<view class="list-container">
			<text class="primary-bg i-list-item" style="margin-bottom: 20rpx;height: 120rpx;">
				地址：{{address}}
			</text>
		</view>
		<!--<view class="list-container">-->
			<!--<text class="primary-bg i-list-item" style="margin-bottom: 20rpx;height: 120rpx;">-->
				<!--联系手机：{{contactPhone}}-->
			<!--</text>-->
		<!--</view>-->
		<view class="list-container" style="background: white;color: black">
			<view >
				<!-- 表格头部标题 -->
				<view class="table-header">
					<text class="table-header-item">行号</text>
					<text class="table-header-item">商品名称</text>
					<text class="table-header-item">数量(单位)</text>
					<text class="table-header-item">备注</text>
				</view>
				<!-- 表格内容 -->
				<scroll-view class="table-scroll-view" scroll-y="true">
					<block v-for="(item, index) in tableList" :key="index">
						<view class="table-row">
							<text class="table-row-item">{{ item.retainfield1 }}</text>
							<text class="table-row-item">{{ item.productName }}</text>
							<text class="table-row-item">{{item.num}}{{ item.unit }}</text>
							<text class="table-row-item">{{item.rank!=null?item.rank!='null'?item.rank:'':''}}</text>
						</view>
					</block>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as XLSX from "../../static/excel.js";
	export default {
		onShareAppMessage() {
			return {
				title: '赐丰订单',
				path: '/pages/index/index',
				imageUrl: '/static/ewm.jpg'
			}
		},
		components: {},
		data() {
			return {
				phone: null,
				// 地址
				address: null,
				//联系手机
				contactPhone: null,
				exId: null,
				tableList: []
			}
		},
		onLoad(option) {
			const phoneObj = uni.getStorageSync('phone');
			if (phoneObj && phoneObj.value) {
				// 判断缓存是否过期
				var now = new Date().getTime();
				if (now < phoneObj.expire) {
					this.phone = phoneObj.value;
					this.contactPhone = phoneObj.value;
					this.isLogin = true;
				} else {
                    // 缓存过期，清空本地缓存
                    this.phone = null;
                    uni.removeStorageSync('phone');
                    this.isLogin = false;
				}
			}
			this.getInfo(option.exId)
		},
		computed: {

		},

		methods: {
			async init() {
				// 加载 XLSX 库
				await import ('xlsx')
				console.log('XLSX 已加载完成')
			},

			dcEx() {
				//文件名
				const fileName='商品数据';

				//需要导出的字段
				const header = ['retainfield1', 'productName', 'num'];

				//excel头部名称，字段对应名称
				const headerName = { retainfield1: '行号', productName: '商品名称', num: '数量', unit: '单位', rank:'备注'};

				//后台数据
				const ExcelData = []

				this.tableList.forEach(item => {
					ExcelData.push({retainfield1:item.retainfield1,productName: item.productName,num: item.num,unit: item.unit,rank:item.rank})
				})

				XLSX.excel_exprot(ExcelData, header, headerName,fileName)
			},
			getInfo(rId) {
				var that = this
				uni.request({
					method: 'GET',
					url: that.bash + '/fApi/record/'+rId,
					success: res => {
						if (res.data.code == 200) {
							// 地址
							that.address = res.data.data.address
							//联系手机
							that.contactPhone= res.data.data.contactPhone
							that.exId = res.data.data.id
							that.getList()
						}
					}
				})
			},
			getList() {
				var that = this
				uni.request({
					data:{
						productExid:that.exId
					},
					method: 'GET',
					url: that.bash + '/fApi/exproduct/listEx',
					success: res => {
						if (res.data.code == 200) {
							// 地址
							that.tableList = res.data.data
						}
					}
				})
			}
		},
		mounted() {
			this.$nextTick(this.init);
		}
	}
</script>

<style>
	/* 表格样式 */
	.table-header {
		display: flex;
		background-color: #f2f2f2;
		padding: 10px;
	}
	.table-header-item {
		flex: 1;
		text-align: center;
	}
	.table-row {
		display: flex;
		border-bottom: 1px solid #c2c2c2;
		padding: 10px;
	}
	.table-row-item {
		flex: 1;
		text-align: center;
	}
	.table-scroll-view {
		height: 100%;
	}

	/* 分页样式 */
	.pagination {
		display: flex;
		justify-content: center;
		padding: 10px;
	}
	.pagination-item {
		background-color: #fff;
		border: 1px solid #c2c2c2;
		color: #444;
		cursor: pointer;
		margin: 0 5px;
		padding: 5px;
	}
	.pagination-item-active {
		background-color: #007aff;
		border-color: #007aff;
		color: #fff;
	}
</style>
<style>
	page {
		background: #e4e3e6;
		color: #090909;
	}
</style>
<style scoped lang="less">
	.container {
		.info-box {
			border-bottom: 2px solid #ffffff;
			height: 150upx;
			margin: 20upx 0;
			padding-left: 20upx;
			display: flex;
			.avatar {
				margin: 0;
				padding: 0;
				background: none;
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-right: 20upx;
				.userinfo{
					width:100upx;
					height: 100upx;
					border-radius: 50%;
					display:flex;
					overflow: hidden;
				}
			}
			.user-info {
				height: 80upx;
				display: flex;
				flex-direction: column;
				.username {
					margin-top: 34upx;
					margin-bottom: 14upx;
				}
				.tips-txt{
					font-size: 20upx;
				}
			}
		}

		.list-container {
			border-bottom: 2px solid #ffffff;
			.i-list-item {
				display: flex;
				align-items: center;
				padding-left: 40upx;
				background: #f4fff8;
				border-bottom: 2px solid #ffffff;
				&:last-child {
					border-bottom: none;
				}
			}
			.i-icon {
				width: 40upx;
				height: 40upx;
				margin-right: 50upx;
				&.i-icon-arrow-r {
					flex: 1;
					text-align: right;
					color: #ffffff;
					/*font-size: 40upx;*/
					margin-right: 80upx;
					font-weight: bold;
				}
			}
			.i-title {
				color: #ffffff;
				font-size: 32upx;
			}
		}
	}
</style>
<style scoped>
	.card {
		margin-top: 20rpx;
		height: 150rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 2rpx;
		box-shadow: 0 1rpx 10rpx rgba(0, 0, 0, 0.1);
		border-radius: 10rpx;
	}
	.card2 {
		/*margin-bottom: 10rpx;*/
		/*display: flex;*/
		padding: 3rpx;
	}
	.right {
		flex: 1;
		margin-left: 50rpx;
		margin-top: -30rpx;
	}
	.name {
		color: #999;
		font-size: 30rpx;
		font-weight: 600;
		margin-top: 30rpx;
	}

	.intro {
		font-size: 25rpx;
		color: #999;
		margin-top: 10rpx;
	}


	.button {
		margin-right: 10rpx;
		width: 100px;
		height: 30px;
		background-color: #007aff;
		color: #fff;
		font-size: 23rpx;
	}
</style>